<template>
    <div id="box">
      <div id="con1" ref="con1">
        <div v-for="(item, index) in items" :key="index" class="form-item">
          <label>教室:</label>
          <span class="input-name">{{ item.name }}</span>
          <label>时间:</label>
          <span class="input-time">{{ item.time }}</span>
          <label>状态:</label>
          <span style="color:darkorange;" class="input-reason">{{ item.reason }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import service from '@/request';
  
  export default {
    name: 'InfiniteScroll',
    data() {
      return {
        items: [],
      };
    },
    mounted() {
      this.fetchData(); // 在组件挂载时调用 fetchData 方法
    },
    methods: {
      async fetchData() {
        try {
          const response = await service.get("/First/getAllCheckByfalse");
          const resultData = response.value;
          this.items = resultData; // 将数据存储在 items 数组中
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
    },
  };
  </script>
  
  <style scoped>
  #box {
    margin: 0 auto;
    width: 600px;
    height: 375px;
    line-height: 30px;
    overflow: hidden;
    background-color:#fff;;
    padding-left: 30px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  
  #con1 {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
   
    animation: scroll 5s linear infinite;
  }
  
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    background-color: #f9f9f9;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .form-item label {
    font-weight: bold;
    margin-right: 8px;
  }
  
  .input-name,
  .input-time,
  .input-reason {
    margin-right: 20px;
  }
  
  .status-available {
    color: green;
  }
  
  .status-unavailable {
    color: red;
  }
  
  @keyframes scroll {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }
  </style>
  